<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="alltitle">用户性别分布</div>
		<div class="allnav" id="gender"></div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				genderDom: null,
				genderOption: []
			};
		},
		methods: {
			async genderData(isLoading = true) {
				if (isLoading) {
					this.genderDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-member']
					.collection()
					.groupBy('member_gender as gender')
					.groupField('count(*) as cnt')
					.get();

				let gender = {
					code: 0,
					datas: [],
					maps: new Map()
				};

				await Promise.all([res1]).then(resData => {
					resData[0].result.data.forEach(x => {
						switch (x.gender) {
							case 1:
								x.gender = '男';
								break;
							case 2:
								x.gender = '女';
								break;
							default:
								x.gender = '未知';
								break;
						}

						if (gender.maps.has(x.gender)) {
							gender.maps.get(x.gender).cnt += x.cnt;
						} else {
							gender.maps.set(x.gender, {
								cnt: x.cnt,
								gender: x.gender
							});
						}
					});
				}).catch(() => {
					if (isLoading) {
						this.genderDom.hideLoading();
					}
				})

				if (isLoading) {
					this.genderDom.hideLoading();
				}

				gender.datas = [...gender.maps.values()];

				if (gender.datas.length > 0) {
					gender.code = 200;
				}

				if (gender.code == 200) {
					this.genderOption.color = [];
					this.genderOption.series[0].data = [];
					gender.datas.forEach(x => {
						this.genderOption.series[0].data.push({
							value: x.cnt,
							name: x.gender
						});

						switch (x.gender) {
							case '男':
								this.genderOption.color.push('#00FFFF');
								break;
							case '女':
								this.genderOption.color.push('#C424FF');
								break;
							default:
								this.genderOption.color.push('#ff6a6c');
								break;
						}
					});
				}
				this.genderDom.setOption(this.genderOption);
			},
			genderCharts(callback) {
				this.genderDom = this.$echarts.init(document.getElementById('gender'));

				var img =
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/c8ad2003-7713-49bb-b555-50387eee20bc.png';
				const man =
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/159b6aca-d4a9-4d10-a091-da6a5ca1fcec.png';
				const woman =
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/a93bf897-10e0-4794-8402-36149690a4a9.png';

				this.genderOption = {
					color: [],
					graphic: {
						elements: [{
								type: 'image',
								style: {
									image: img,
									width: 128,
									height: 128
								},
								left: 'center',
								top: 'center'
							},
							{
								type: 'image',
								style: {
									image: woman,
									width: 35,
									height: 50
								},
								left: '50%',
								top: 'center'
							},
							{
								type: 'image',
								style: {
									image: man,
									width: 35,
									height: 50
								},
								right: '50%',
								top: 'center'
							}
						]
					},
					tooltip: {
						show: true,
						formatter: ' {b} : {c} ({d}%)     '
					},
					legend: {
						orient: 'vertical',
						x: 'right',
						textStyle: {
							color: 'rgba(255,255,255,.6)'
						}
					},
					series: [{
						type: 'pie',
						clockWise: false,
						center: ['50%', '50%'],
						radius: ['75%', '83%'],
						itemStyle: {
							normal: {
								label: {
									show: true,
									formatter(params) {
										return params.name ? params.name + '\n' + params.value + '人' : '';
									}
								},
								labelLine: {
									length: 10,
									length2: 30,
									show: true
								}
							}
						},
						data: []
					}]
				};

				window.addEventListener('resize', () => {
					this.genderDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.genderCharts(() => {
				this.genderData();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				this.genderData(false);
			});
		}
	};
</script>

<style></style>
